<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>stopBubble</title>
    <style>
        .wrapper{width: 300px;height: 300px;background-color: yellow;}
        .content{width: 200px;height: 200px;background-color: aqua;}
        .box,.obj{width: 100px;height: 100px;background-color: brown;}
    </style>
</head>
<body>
    <div class="obj"></div>
    <div class="wrapper">

    </div>
    <script>
        //事件对象，在每一个事件处理函数里面我们可以写一个形参e， 系统帮咋们传的一个事件对象e，上面有属性，每一个属性都记
        //载了这个事件发生时的一些关键性数据，比如事件类型事件时刻鼠标的一些坐标点，记载着这个事件发生的一系列数据信息，
        //以供我们使用，还把它打包成一个对象，传到第一个形参里面去了，如下：
        var objdiv = document.getElementsByClassName("obj")[0];
        objdiv.onclick = function (e) {//同样的在这里依旧会触发maopao事件 alert("a");
            console.log(e);//MouseEvent {isTrusted: true, screenX: 78, screenY: 159, clientX: 78, clientY: 56, …}
            e.stopPropagation();//而我们可以在这里使用stopPropagation()，就可以阻止冒泡事件maopao了
        };

        //产生冒泡事件啦
        var maopao = document.onclick = function () {
            alert("a");
        };
        var div = document.getElementsByClassName("wrapper")[0];
        div.onclick = function (e) {//点击div避免不了触发maopao事件
            stopBubbleFn(e);
            this.style.backgroundColor = 'red';
        };
        //封装后使用
        function stopBubbleFn(event) {
            if(event.stopPropagation()){
                event.stopPropagation();
            }else {
                event.cancelBubble = true;
            }
        }
    </script>
</body>
</html>
